<template>
  <div class="fzb">
    <div class="top-search">
      <label style="font-size: 13px;">期间：</label>
      <JAuto v-model="ym" style="margin-left: 5px; margin-right: 20px" cat="zqList" />
      <JButton size="small" @click="getList"><i class="fa fa-search" /> 查询</JButton>
    </div>
    <div style="margin-top: 10px">
      <table style="width: 100%">
        <thead>
          <tr>
            <th class="br bb bt bl tc" style="width: 50px">行号</th>
            <th class="br bb bt" style="width: 260px">资产</th>
            <th class="br bb bt" style="width: 140px">期末余额</th>
            <th class="br bb bt" style="width: 140px">年初余额</th>
            <th class="br bb bt" style="width: 260px">负债和所有者权益</th>
            <th class="br bb bt" style="width: 140px">期末余额</th>
            <th class="br bb bt" style="width: 170px">年初余额</th>
            <th class="br bb bt"></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colspan="9">
              <div class="content" :style="{ height: height + 'px' }" style="overflow: auto">
                <table style="width: 100%">
                  <tr
                    v-for="(item, index) in list"
                    :key="index"
                    :class="{ ctr: currentIndex === index }"
                    @click="currentIndex = index"
                  >
                    <td class="br bb bl pdl5 tc" style="width: 50px">{{ index + 1 }}</td>
                    <td
                      class="br bb"
                      style="width: 260px"
                      :class="{ sum: item.zcSx === 'isSum', item: item.zcSx !== 'isParent' }"
                    >
                      {{ item.zcName }}
                    </td>
                    <td
                      class="br bb price"
                      style="width: 140px"
                      :class="{ sum: item.zcSx === 'isSum', toclick: item.zcSx !== 'isSum' }"
                      @click="toClick(item.zcName, 'zcMonthEnd', item.zcMonthEnd, item.zcYearBegin)"
                    >
                      {{ item.zcMonthEnd ? item.zcMonthEnd.toFixed(2) : '' }}
                    </td>
                    <td
                      class="br bb price"
                      style="width: 140px"
                      :class="{ sum: item.zcSx === 'isSum' }"
                    >
                      {{ item.zcYearBegin ? item.zcYearBegin.toFixed(2) : '' }}
                    </td>
                    <td
                      class="br bb"
                      style="width: 260px"
                      :class="{ sum: item.fzSx === 'isSum', item: item.fzSx !== 'isParent' }"
                    >
                      {{ item.fzName }}
                    </td>
                    <td
                      class="br bb price"
                      style="width: 140px"
                      :class="{
                        sum: item.fzSx === 'isSum',
                        toclick: item.fzSx !== 'isSum' && item.fzName !== '未分配利润'
                      }"
                      @click="toClick(item.fzName, 'fzMonthEnd', item.fzMonthEnd, item.fzYearBegin)"
                    >
                      {{ item.fzMonthEnd ? item.fzMonthEnd.toFixed(2) : '' }}
                    </td>
                    <td
                      class="br bb price"
                      style="width: 170px; padding-right: 10px"
                      :class="{ sum: item.fzSx === 'isSum' }"
                    >
                      {{ item.fzYearBegin ? item.fzYearBegin.toFixed(2) : '' }}
                    </td>
                    <td class="    "></td>
                  </tr>
                </table>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
// 资产负债表
import tool from '@/utils/tool'
export default {
  name: 'zcfzb',
  data() {
    return {
      height: window.innerHeight - 150,
      zqList: [],
      currentIndex: -1,
      ym: '',
      list: []
    }
  },
  activated() {
    tool.post('common/dropdown', { cat: 'zqList' }).then((ret) => {
      this.zqList = ret.data
      this.ym = ''
      this.currentIndex = -1
    })
  },
  methods: {
    getList() {
      if (!this.ym) return tool.err('请选择期间')
      tool.post('list/assets', { page: 'zcfz', ym: this.ym, condition: {} }).then((ret) => {
        if (ret.stat) {
          this.list = ret.data
        }
      })
    },
    toClick(subjectName, field, data, yearBegin) {
      if (!data) return
      if (subjectName === '未分配利润') return
    }
  }
}
</script>

<style scoped lang="scss">
.toclick {
  color: dodgerblue;
}
.toclick:hover {
  cursor: pointer;
  text-decoration: underline;
}
.ctr td {
  background-color: deepskyblue;
  color: white;
}
.fzb {
  font-size: 14px;
  background-color: white;
  padding: 10px;
  color: #515a6e;
}
.tc {
  text-align: center;
}
.item {
  padding-left: 30px;
}
.isMinus {
  padding-left: 50px;
}
.sum {
  font-weight: bolder;
  text-align: right;
  padding-right: 10px;
}
.pdl5 {
  padding-left: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.price {
  text-align: right;
  padding-right: 5px;
}
th {
  background-color: #f8f8f9;
  height: 35px;
}
.w60 {
  width: 70px;
}
.w150 {
  width: 150px;
}
.w200 {
  width: 300px;
}
.content .w60 {
  width: 61px;
}
.content .w150 {
  width: 152px;
}
.content .w200 {
  width: 208px;
}
.br {
  border-right: 1px solid #dcdee2;
}
.bb {
  border-bottom: 1px solid #dcdee2;
}
.bl {
  border-left: 1px solid #dcdee2;
}
.bt {
  border-top: 1px solid #dcdee2;
}
.pdl140 {
  padding-left: 140px;
}
.pdl70 td {
  padding-left: 70px;
}
.pdl100 td {
  padding-left: 100px;
}
.tdbold {
  font-weight: bolder;
}
.no {
  text-align: center;
}
</style>